<template>
  <div class="index-view">
      <div class="index-cont">
        <van-tabs animated @change="onClick">
          <van-tab title="最新">
            <div class="index-first">
              <newlist :artList="artList"></newlist>
            </div>
          </van-tab>
          <van-tab title="专享">
            <div class="index-first">
              <newlist :artList="artList"></newlist>
            </div>
          </van-tab>
          <van-tab title="榜单">
            <div class="index-first">
              <band :bandList="bandList"></band>
            </div>
          </van-tab>
          <van-tab title="观点">
            <div class="index-first">
              <viewse :viewList="viewList"></viewse>
            </div>
          </van-tab>
        </van-tabs>
      </div>
  </div>
</template>

<script>
import newlist from '@/components/news/newlist';
import band from '@/components/news/band';
import viewse from '@/components/news/views';
export default {
  components: {
    newlist,
    band,
    viewse
  },

  data () {
    return {
      artList: [],
      type: '',
      bandList: [],
      viewList: [],
    }
  },
  mounted() {
    this.getArt(this.type)
  },
  methods: {
    onClick(event) {
      let num = event.mp.detail.index
      if(num == 0) {
        this.type = ''
        this.getArt(this.type)
      }else if(num == 1) {
        this.type = 2
        this.getArt(this.type)
      }else if(num == 2) {
        this.getBand()
      }else if(num == 3) {
        this.getView()
      }
    },
    getArt(type) {
      this.$http.get({
        url: 'article/latest',
        data: {
          type: type
        }
      }).then((res) => {
        this.artList = res.data.article
      })
    },
    getBand() {
      this.$http.get({
        url: 'article/list',
        data: {}
      }).then((res) => {
        this.bandList = res.data.article
      })
    },
    getView() {
      this.$http.get({
        url: 'article/viewpoint',
        data: {}
      }).then((res) => {
        this.viewList = res.data.viewpoint
      })
    }
  },
}
</script>

<style>
.index-view .index-cont .index-first {
  width: 6.78rem;
  margin: 0 auto;
  padding-top: 0.24rem;
}
</style>
